<template>
	<!-- 修改密码页面 -->
	<view class="page change-password-page show" >
	  <view class="page-content">
		  <u-form :model="pwdData" :rules="pwdRules" ref="pwdForm" labelWidth="80" labelAlign="right"
		  	:borderBottom="true">
		  	<u-form-item label="旧密码" prop="pwd" borderBottom>
		  		<u-input type="password" placeholder="请输入旧密码" v-model="pwdData.pwd" class="input-item"
		  			prefix-icon="lock" password-icon></u-input>
		  	</u-form-item>
		  	<u-form-item label="新密码" prop="newPwd" borderBottom>
		  		<u-input type="password" placeholder="请输入新密码" v-model="pwdData.newPwd" class="input-item"
		  			prefix-icon="lock" password-icon></u-input>
		  	</u-form-item>
			<u-form-item label="重复密码" prop="confirmPwd" borderBottom>
				<u-input type="password" placeholder="请再次输入新密码" v-model="pwdData.confirmPwd" class="input-item"
					prefix-icon="lock" password-icon></u-input>
			</u-form-item>
		  	<u-form-item>
		  		<u-button ref="confirmBtn" type="primary" class="action-btn" @click="confirmPwd">确认修改</u-button>
		  	</u-form-item>
		  </u-form>
	  </view>
	</view>
</template>

<script>
	import {
		modifyUserPwd
	} from '@/api/profileApi.js'
	import w_md5 from "@/js_sdk/zww-md5/w_md5.js"
export default {
  data() {
    return {
	pwdData:{
		pwd:'',
		newPwd:'',
		confirmPwd:''
	},
	// 校验规则
	pwdRules: {
		pwd: [{
			required: true,
			message: '旧密码不能为空',
			trigger: 'blur'
		}],
		newPwd: [{
			required: true,
			message: '新密码不能为空',
			trigger: 'blur'
		},{
  pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/,
  message: '密码必须包含字母和数字，且长度在8-20个字符之间',
  trigger: 'blur'
}],
		confirmPwd: [
			{
				required: true,
				message: '确认密码不能为空',
				trigger: 'blur'
			},
			{
				validator: (rule, value, callback) => {
					console.log('???',value)
					if (value !== this.pwdData.newPwd) {
						callback(new Error('确认密码与密码不一致'));
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}
		],
		}
    };
  },
  onReady() {
		//onReady 为uni-app支持的生命周期之一
    	this.$refs.pwdForm.setRules(this.pwdRules)
},
  methods: {
	confirmPwd(){
		this.$refs.pwdForm.validate().then(async val => {
			// 校验通过后，执行提交操作
			// w_md5.hex_md5_16(this.formData.userPwd),
			const params={
				pwd:w_md5.hex_md5_16(this.pwdData.pwd),
				newPwd:w_md5.hex_md5_16(this.pwdData.newPwd),
				confirmPwd:w_md5.hex_md5_16(this.pwdData.confirmPwd),
			}
			uni.showLoading({
				title:'修改中'
			})
			const res=await modifyUserPwd(params)
			if(res.result==0){
				uni.$u.toast('修改成功');
			}else{
				uni.$u.toast(res.message||'修改失败');
			}
			uni.hideLoading()
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
	},
    }
};
</script>

<style>
	@import 'index.css'
</style>